<template>
  <div>
    <Header />
    <div>
      <p class="subscribe_title">
        订阅种类
        <span>(可多选)</span>
      </p>
      <div class="type_details">
        <p
          v-for="(item,index) in List "
          :key="index"
          @click="item.show = !item.show"
          :class="[item.show?'select_border':'']"
        >{{item.text}}</p>
      </div>
    </div>
    <div>
      <p class="subscribe_title">订阅时间</p>
      <div class="time_details">
        <p
          v-for="(item,index) in listTwo "
          :key="index"
          @click="Onlist(item.id)"
          :class="[item.show?'select_border':'']"
        >{{item.text}}</p>
      </div>
      <p class="select_time" v-if="days==4">
        <el-date-picker type="date" placeholder="开始时间" v-model="startVale" style="width: 43%;"></el-date-picker>&nbsp;——
        <el-date-picker type="date" placeholder="结束时间" v-model="endVale" style="width: 43%;"></el-date-picker>
      </p>
    </div>
    <div>
      <p class="subscribe_title">联系方式</p>
      <div class="subscribe_ipt">
        <van-field v-model="sms" center clearable placeholder="请输入电话号码">
          <template #button>
            <van-button class="subscribe_btn" @click="OnCode">
              <span v-if="show" @click="OnCode">获取验证码</span>
              <span v-else>{{ second }}s</span>
            </van-button>
          </template>
        </van-field>
        <van-field v-model="value1" placeholder="请输入验证码" />
      </div>
    </div>
    <p class="subscribe_fix" @click="OnSubscribe">确定</p>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
import rem from "@/assets/js/rem.js";
export default {
  data() {
    return {
      value1: "",
      sms: "",
      days: "",
      startTime: false,
      endTime: false,
      startVale: "",
      endVale: "",
      verifyCode: "",
      show: true,
      timer: null,
      second: 60,
      List: [
        {
          text: "上新房源",
          show: false,
          id: 1
        },
        {
          text: "开拍房源",
          show: false,
          id: 2
        },
        {
          text: "特惠房源",
          show: false,
          id: 3
        }
      ],
      listTwo: [
        {
          text: "7天",
          show: false,
          id: 1
        },
        {
          text: "15天",
          show: false,
          id: 2
        },
        {
          text: "30天",
          show: false,
          id: 3
        },
        {
          text: "自定义",
          show: false,
          id: 4
        }
      ]
    };
  },
  methods: {
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.second = 60;
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.sms
        })
        .then(res => {
          this.$notify({
            message: res.data.msg,
            duration: 2000
          });
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
        })
        .catch(function(error) {});
    },
    Onlist(val) {
      this.listTwo.forEach(item => {
        if (item.id == val) {
          item.show = true;
          this.days = val;
        } else {
          item.show = false;
        }
      });
    },
    Onstart(time) {
      this.startVale = time;
    },
    Onend(time) {
      this.endVale = time;
    },
    OnSubscribe() {
      let type = "";
      this.List.forEach(item => {
        if (item.show == true) {
          type += item.id + ",";
        }
      });
      if (type != "") {
        if (this.days != "") {
          if (this.sms != "") {
            if (this.value1 == this.verifyCode && this.value1 != "") {
              this.instance
                .Subscribe({
                  type: type,
                  days: this.days,
                  telephone: this.sms,
                  startTime: this.startVale,
                  endTime: this.endVale
                })
                .then(res => {
                  this.$notify({
                    message: res.data.msg,
                    duration: 2000
                  });
                })
                .catch(function(error) {});
            } else {
              this.$notify({
                message: "请正确输入验证码",
                duration: 2000
              });
            }
          } else {
            this.$notify({
              message: "请填写手机号",
              duration: 2000
            });
          }
        } else {
          this.$notify({
            message: "请选择订阅时间",
            duration: 2000
          });
        }
      } else {
        this.$notify({
          message: "请选择订阅种类",
          duration: 2000
        });
      }
    }
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style lang="less" scoped>
.subscribe_title {
  font-size: 0.14rem;
  margin: 0.28rem 0 0.2rem 0.16rem;
  color: #222222;
  span {
    margin-left: 0.1rem;
    font-size: 0.1rem;
    color: #999999;
  }
}
.select_border {
  border: 1px solid #f5643e;
  color: #f5643e;
}
.type_details {
  color: #232627;
  margin-left: 0.15rem;
  overflow: hidden;
  p {
    float: left;
    width: 29%;
    line-height: 0.4rem;
    text-align: center;
    font-size: 0.12rem;
    margin-right: 0.115rem;
    background: #f9f9f8;
    border-radius: 10px;
  }
}
.time_details {
  font-size: 0.12rem;
  color: #232627;
  margin-bottom: 0.4rem;
  margin-left: 0.15rem;
  overflow: hidden;
  p {
    float: left;
    width: 21%;
    line-height: 0.4rem;
    text-align: center;
    margin-right: 0.1rem;
    background: #f9f9f8;
    border-radius: 10px;
  }
}
.select_time {
  font-size: 0.13rem;
  color: #999999;
  padding-bottom: 0.2rem;
  margin: 0 0.16rem;
  border-bottom: 1px solid #f9f9f8;
  span {
    padding: 0 0.5rem;
  }
}
.subscribe_ipt {
  margin: 0 0.16rem;
  .van-cell {
    background: #f9f9f8;
    margin-bottom: 0.1rem;
    height: 0.44rem;
  }
  .subscribe_btn {
    border: none;
    background: #f9f9f8;
    border-left: 1px solid #e3e0df;
    color: #f5643e;
  }
}
.subscribe_fix {
  margin: 0.4rem 0.16rem;
  font-size: 0.15rem;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  background: #f58057;
  border-radius: 10px;
  color: #ffffff;
}
</style>